<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <script src="./static/vue.global.js"></script>
    <link rel="stylesheet" href="./static/index.css">
    <script src="./static/index.full.js"></script>
    <title>我的应用</title>
</head>
<body>
<div id="app">
    <el-tabs :tab-position="top">
        <el-tab-pane label="HTTP客户端">
            <el-form ref="formRef" :model="form">
                <el-form-item>
                    <el-input v-model="input" type="textarea" rows="22" v-show="showType"></el-input>
                    <el-input v-model="output" type="textarea" rows="22" readonly v-show="!showType"></el-input>
                </el-form-item>
                <el-form-item required>
                    <el-col :span="12">
                        <el-col>
                            <el-form-item label="记录选择">
                                <el-select placeholder="记录选择" v-model="name" filterable>
                                    <el-option v-for="item in nameOptions" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4" :offset="1">
                            <el-checkbox label="原值" v-model="sendType"></el-checkbox>
                        </el-col>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-input
                                    v-model="autoValue"
                                    class="input-with-select">
                                <template #prepend>
                                    <el-select placeholder="数据支持" v-model="autoValue" style="width: 110px">
                                        <el-option v-for="item in autoSelectOptions" :key="item.value"
                                                   :label="item.label"
                                                   :value="item.value"></el-option>
                                    </el-select>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-col :span="11" :offset="1">
                            <el-form-item label="开始">
                                <el-input v-model="start"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11" :offset="1">
                            <el-form-item label="结束">
                                <el-input v-model="end"/>
                            </el-form-item>
                        </el-col>
                    </el-col>
                </el-form-item>
                <el-divider content-position="left"></el-divider>
                <el-form-item required>
                    <el-col :span="12">
                        <el-col :span="5" :offset="1">
                            <el-button type="primary" :loading="loading" onclick="sendMessage()">开始</el-button>
                        </el-col>
                        <el-col :span="5" :offset="1">
                            <el-button @click="showType = !showType">切换</el-button>
                        </el-col>
                        <el-col :span="5" :offset="1">
                            <el-button type="success" onclick="messageSave()">保存</el-button>
                        </el-col>
                        <el-col :span="5" :offset="1">
                            <el-button type="danger" onclick="deleteHis()">删除</el-button>
                        </el-col>
                    </el-col>
                    <el-col :span="12">
                        <el-col :span="4" :offset="1">
                            <el-checkbox label="循环" v-model="forCheck"/>
                        </el-col>
                        <el-col :span="18">
                            <el-col :span="11" :offset="1">
                                <el-form-item label="并行数量">
                                    <el-input v-model="fThread" :disabled="!forCheck"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11" :offset="1">
                                <el-form-item label="间隔时间">
                                    <el-input v-model="fTime" :disabled="!forCheck"/>
                                </el-form-item>
                            </el-col>
                        </el-col>
                    </el-col>
                </el-form-item>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="TCP客户端">Role</el-tab-pane>
        <el-tab-pane label="HTTP服务端">Config</el-tab-pane>
        <el-tab-pane label="TCP服务端">Task</el-tab-pane>
        <el-tab-pane label="二维码">Task</el-tab-pane>
    </el-tabs>
</div>

<script>
    const App = {
        mounted() {
            window.vue = this
        },
        data() {
            return {
                loading: false,
                showType: true,
                name: "",
                autoValue: "int:9",
                input: "",
                output: "",
                start: "1",
                end: "100",
                forCheck: false,
                sendType: false,
                click: "",
                fTime: "500",
                fThread: "200",
                nameOptions: [{"label": "名称", "value": "123"}],
                autoSelectOptions: [
                    {"label": "随机数", "value": "int:9"},
                    {label: "随机串", value: "str:32"},
                    {label: "身份证号码", value: "idCart:1"},
                    {label: "身份证姓名", value: "idName:1"},
                    {label: "请求取值", value: "req:0:name"},
                    {label: "响应取值", value: "res:0:name"},
                    {label: "2006-01-02 15:04:05", value: "date:2006-01-02 15:04:05"},
                    {label: "2006-01-02", value: "date:2006-01-02"},
                    {label: "15:04:05", value: "date:15:04:05"},
                    {label: "20060102150405", value: "date:20060102150405"},
                    {label: "20060102", value: "date:20060102"},
                    {label: "150405", value: "date:150405"},
                    {label: "timestamp", value: "date:timestamp"},],
            };
        },
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");
</script>
</body>
</html>